<template>
  <div class="kawaii-upload-component">
    <!-- 背景动画元素 -->
    <div class="animated-background">
      <div class="floating-bubble" v-for="n in 15" :key="n"></div>
    </div>

    <!-- 初始上传区域，只在未上传视频时显示 -->
    <div v-if="!isUploaded" class="kawaii-upload-area">
      <div class="upload-icon-container">
        <span class="upload-big-icon">📁</span>
      </div>
      <div class="upload-text">将你的动漫创作分享给全世界吧~</div>
      <input
        type="file"
        ref="fileInput"
        style="display: none"
        accept="video/*"
        @change="handleFileChange"
      />
      <button class="upload-file-btn pulse-animation" @click="selectFile">
        选择文件
      </button>
      <div class="upload-options">
        <div class="video-size-option">
          <span>🎞️ 视频大小限制</span>
          <div class="option-tooltip">
            <p>单个视频最大上传大小为 50MB</p>
            <p>推荐分辨率：1080p</p>
          </div>
        </div>
        <div class="video-format-option">
          <span>📼 支持的格式</span>
          <div class="option-tooltip">
            <p>支持格式：MP4, AVI, MOV, WMV</p>
            <p>推荐格式：MP4</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 上传后显示的内容：上传进度和表单 -->
    <div v-if="isUploaded" class="kawaii-upload-content">
      <!-- 上传进度列表 -->
      <div class="upload-progress-container kawaii-card">
        <div class="progress-header">
          <h3 class="progress-title">✨ 魔法上传进度 ✨</h3>
        </div>

        <div class="upload-progress">
          <div class="progress-label">
            <span>封印解除进度</span>
            <span class="progress-percent">{{ uploadProgress }}%</span>
          </div>

          <!-- 魔卡少女樱风格进度条 -->
          <div class="sakura-progress-container">
            <div
              class="sakura-progress-bar"
              :style="{ width: uploadProgress + '%' }"
              :class="{ 'seal-released': uploadProgress >= 100 }"
            ></div>

            <!-- 小樱法杖指示器 -->
            <div
              class="sakura-wand"
              :style="{ left: uploadProgress + '%' }"
              :class="{ 'seal-complete': uploadProgress >= 100 }"
            ></div>
          </div>
        </div>

        <!-- 上传的文件列表 -->
        <div class="kawaii-progress-list">
          <div
            v-for="(part, index) in videoInfo.parts"
            :key="index"
            class="kawaii-part-item"
          >
            <div class="part-info">
              <div class="part-icon">P{{ index + 1 }}</div>
              <div class="part-title">{{ part.title }}</div>
              <div class="part-status" v-if="part.status === 'completed'">
                <span class="status-icon success">✅</span>
                上传完成
              </div>
              <div class="part-status" v-else>
                <span class="progress-text">
                  已上传: {{ part.uploadedSize }}/{{ part.totalSize }}
                </span>
              </div>
              <div class="part-actions">
                <button class="kawaii-action-btn" @click="removePart(index)">
                  <span class="action-icon">🗑️</span>
                </button>
              </div>
            </div>
          </div>

          <button @click="addNewPart" class="kawaii-add-btn">
            <span class="add-icon">➕</span>
            添加分P
          </button>
        </div>
      </div>

      <!-- 信息填写表单 -->
      <div class="kawaii-form kawaii-card">
        <div class="form-title">✏️ 填写视频信息</div>

        <div class="form-group">
          <label>视频标题</label>
          <input
            type="text"
            v-model="videoInfo.title"
            placeholder="给你的创作取个可爱的名字吧~"
          />
        </div>

        <div class="form-group">
          <label>视频封面</label>
          <div class="cover-upload">
            <div class="cover-preview" v-if="coverUrl">
              <img :src="coverUrl" alt="封面预览" />
            </div>
            <div class="cover-placeholder" v-else @click="openCoverDialog">
              <span>点击选择封面图片</span>
            </div>
            <button @click="openCoverDialog" class="kawaii-cover-btn">
              选择封面
            </button>
          </div>
        </div>

        <div class="form-group">
          <label>视频分区</label>
          <select v-model="videoInfo.area">
            <option value="">请选择分区</option>
            <option v-for="area in areas" :key="area.value" :value="area.value">
              {{ area.label }}
            </option>
          </select>
        </div>

        <div class="form-group">
          <label>视频标签</label>
          <div class="tags-container">
            <div
              class="kawaii-tag"
              v-for="(tag, index) in videoInfo.tags"
              :key="index"
            >
              {{ tag }}
              <span class="remove-tag" @click="removeTag(index)">×</span>
            </div>
            <input
              type="text"
              v-model="tagInput"
              @keyup.enter="createTag"
              placeholder="输入标签后按Enter"
              class="tag-input"
            />
          </div>
        </div>

        <div class="form-group">
          <label>视频简介</label>
          <textarea
            v-model="videoInfo.description"
            placeholder="写点什么来介绍你的视频吧~"
            rows="4"
          ></textarea>
        </div>

        <div class="form-actions">
          <button class="kawaii-submit-btn" @click="submitForm">
            魔法发布
          </button>
          <button class="kawaii-cancel-btn" @click="cancelSubmit">取消</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 封面上传对话框 -->
  <div v-if="showCoverDialog" class="kawaii-dialog-overlay">
    <div class="kawaii-dialog">
      <div class="dialog-header">
        <h3>✨ 选择魔法封面 ✨</h3>
        <button class="close-btn" @click="closeCoverDialog">×</button>
      </div>
      <div class="dialog-body">
        <div class="cover-preview-large">
          <img
            v-if="tempCoverUrl"
            :src="tempCoverUrl"
            alt="封面预览"
            class="preview-image"
          />
          <div v-else class="preview-placeholder">
            <div class="size-indicator">680 × 408</div>
          </div>
        </div>

        <div class="cover-thumbs">
          <div class="thumb-title">从视频中选择</div>
          <div class="thumb-list">
            <div
              class="thumb-item"
              v-for="i in 3"
              :key="i"
              @click="selectThumbnail(i - 1)"
            >
              <img
                :src="
                  'https://i0.hdslb.com/bfs/archive/' +
                  [
                    '4de86ebf91d4fdc9521747b7246aa27aeaff9b3a',
                    '02cf0e3a1fd8962d8c4ca155548c1fa173162c9e',
                    'c18443e4f1d1df886089e96ea3a0412340b868f1',
                  ][i - 1] +
                  '.jpg'
                "
                alt="缩略图"
              />
            </div>
          </div>
        </div>

        <div class="upload-options">
          <button class="kawaii-upload-btn" @click="selectCoverFile">
            <span class="upload-icon">🖼️</span>
            选择图片
          </button>
          <input
            type="file"
            ref="coverFileInput"
            style="display: none"
            accept="image/*"
            @change="handleCoverFileChange"
          />
          <p class="upload-hint">建议尺寸：680*408px，格式：PNG、JPG、JPEG</p>
        </div>

        <div class="dialog-actions">
          <button class="kawaii-cancel-btn" @click="closeCoverDialog">
            取消
          </button>
          <button class="kawaii-confirm-btn" @click="confirmCover">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 路由
const router = useRouter()

// 文件处理相关变量
const fileInput = ref<HTMLInputElement | null>(null)
const coverFileInput = ref<HTMLInputElement | null>(null)
const isUploaded = ref(false)
const isUploading = ref(false)
const uploadCompleted = ref(false)
const coverUrl = ref('')
const tempCoverUrl = ref('')
const showCoverDialog = ref(false)
const tagInput = ref('')

// 进度动画相关
const uploadProgress = ref(0)
const currentDivergence = ref('0.571024')
const divergenceValues = [
  '0.571024',
  '0.523299',
  '0.337187',
  '0.275349',
  '0.456914',
  '0.571046',
  '1.048596',
]

// 视频信息表单
interface VideoPart {
  title: string
  progress: number
  file: File | null
  uploadedSize: string
  totalSize: string
  status: 'uploading' | 'completed' | 'error'
}

interface VideoInfo {
  title: string
  cover: string
  type: 'original' | 'reprint'
  tags: string[]
  area: string
  description: string
  allowComment: boolean
  allowDanmu: boolean
  parts: VideoPart[]
}

const videoInfo = ref<VideoInfo>({
  title: '',
  cover: '',
  type: 'original',
  tags: [],
  area: '',
  description: '',
  allowComment: true,
  allowDanmu: true,
  parts: [],
})

// 预设分区
const areas = [
  { value: 'anime', label: '动画' },
  { value: 'manga', label: '漫画' },
  { value: 'game', label: '游戏' },
  { value: 'music', label: '音乐' },
  { value: 'dance', label: '舞蹈' },
  { value: 'tech', label: '科技' },
]

// 选择文件
const selectFile = () => {
  fileInput.value?.click()
}

// 处理文件选择
const handleFileChange = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files.length > 0) {
    const file = target.files[0]

    // 验证文件类型
    if (!file.type.startsWith('video/')) {
      ElMessage.error('请选择有效的视频文件')
      return
    }

    // 验证文件大小（50MB）
    const maxSize = 50 * 1024 * 1024
    if (file.size > maxSize) {
      ElMessage.error('文件大小不能超过50MB')
      return
    }

    // 添加文件到列表并开始上传
    videoInfo.value.parts.push({
      title: file.name,
      progress: 0,
      uploadedSize: '0MB',
      totalSize: (file.size / (1024 * 1024)).toFixed(2) + 'MB',
      status: 'uploading',
      file: file,
    })

    isUploaded.value = true
    simulateUpload(0)
  }
}

// 添加新分P
const addNewPart = () => {
  if (videoInfo.value.parts.length >= 5) {
    ElMessage.warning('最多添加5个分P')
    return
  }

  const fileInput = document.createElement('input')
  fileInput.type = 'file'
  fileInput.accept = 'video/*'
  fileInput.onchange = (event) => {
    const target = event.target as HTMLInputElement
    if (target.files && target.files.length > 0) {
      const file = target.files[0]

      // 验证文件类型
      if (!file.type.startsWith('video/')) {
        ElMessage.error('请选择有效的视频文件')
        return
      }

      // 验证文件大小（50MB）
      const maxSize = 50 * 1024 * 1024
      if (file.size > maxSize) {
        ElMessage.error('文件大小不能超过50MB')
        return
      }

      // 添加新的分P
      videoInfo.value.parts.push({
        title: file.name,
        progress: 0,
        uploadedSize: '0MB',
        totalSize: (file.size / (1024 * 1024)).toFixed(2) + 'MB',
        status: 'uploading',
        file: file,
      })

      simulateUpload(videoInfo.value.parts.length - 1)
      ElMessage.success('分P添加成功')
    }
  }
  fileInput.click()
}

// 移除分P
const removePart = (index: number) => {
  videoInfo.value.parts.splice(index, 1)
  if (videoInfo.value.parts.length === 0) {
    isUploaded.value = false
    uploadProgress.value = 0
  }
}

// 模拟上传过程
const simulateUpload = (partIndex: number) => {
  if (!videoInfo.value.parts[partIndex]) return

  isUploading.value = true
  const part = videoInfo.value.parts[partIndex]
  const totalSize = parseFloat(part.totalSize)
  uploadProgress.value = 0

  const interval = setInterval(() => {
    uploadProgress.value += 1

    // 更新分P进度
    part.progress = uploadProgress.value
    part.uploadedSize =
      ((uploadProgress.value / 100) * totalSize).toFixed(2) + 'MB'

    // 根据进度更新世界线变动率
    if (uploadProgress.value % 15 === 0) {
      const randomIndex = Math.floor(Math.random() * divergenceValues.length)
      currentDivergence.value = divergenceValues[randomIndex]
    }

    if (uploadProgress.value >= 100) {
      clearInterval(interval)
      part.status = 'completed'
      isUploading.value = false
      uploadCompleted.value = true
      ElMessage.success({
        message: '封印解除完成！可以填写视频信息了',
        duration: 2000,
      })
    }
  }, 50)
}

// 选择封面文件
const selectCoverFile = () => {
  coverFileInput.value?.click()
}

// 处理封面文件选择
const handleCoverFileChange = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files.length > 0) {
    const file = target.files[0]

    // 验证文件类型
    if (!file.type.startsWith('image/')) {
      ElMessage.error('请选择有效的图片文件')
      return
    }

    // 验证文件大小（2MB）
    const maxSize = 2 * 1024 * 1024
    if (file.size > maxSize) {
      ElMessage.error('图片大小不能超过2MB')
      return
    }

    // 创建预览URL
    const reader = new FileReader()
    reader.onload = (e) => {
      tempCoverUrl.value = e.target?.result as string
    }
    reader.readAsDataURL(file)
  }
}

// 打开封面对话框
const openCoverDialog = () => {
  showCoverDialog.value = true
}

// 关闭封面对话框
const closeCoverDialog = () => {
  showCoverDialog.value = false
}

// 确认封面选择
const confirmCover = () => {
  if (tempCoverUrl.value) {
    coverUrl.value = tempCoverUrl.value
    videoInfo.value.cover = coverUrl.value
    closeCoverDialog()
    ElMessage.success('封面设置成功')
  } else {
    ElMessage.warning('请先选择一张封面图片')
  }
}

// 从视频中选择封面
const selectThumbnail = (index: number) => {
  const thumbnailUrls = [
    'https://i0.hdslb.com/bfs/archive/4de86ebf91d4fdc9521747b7246aa27aeaff9b3a.jpg',
    'https://i0.hdslb.com/bfs/archive/02cf0e3a1fd8962d8c4ca155548c1fa173162c9e.jpg',
    'https://i0.hdslb.com/bfs/archive/c18443e4f1d1df886089e96ea3a0412340b868f1.jpg',
  ]
  tempCoverUrl.value = thumbnailUrls[index]
}

// 添加标签
const createTag = () => {
  if (
    tagInput.value &&
    !videoInfo.value.tags.includes(tagInput.value) &&
    videoInfo.value.tags.length < 10
  ) {
    videoInfo.value.tags.push(tagInput.value)
    tagInput.value = ''
  }
}

// 移除标签
const removeTag = (index: number) => {
  videoInfo.value.tags.splice(index, 1)
}

// 表单提交
const submitForm = () => {
  // 表单验证
  if (!videoInfo.value.title) {
    ElMessage.warning('请填写视频标题')
    return
  }

  if (!videoInfo.value.cover) {
    ElMessage.warning('请上传视频封面')
    return
  }

  if (!videoInfo.value.area) {
    ElMessage.warning('请选择视频分区')
    return
  }

  if (videoInfo.value.tags.length === 0) {
    ElMessage.warning('请至少添加一个标签')
    return
  }

  if (!videoInfo.value.description) {
    ElMessage.warning('请填写视频简介')
    return
  }

  // 提交成功的消息
  ElMessage.success({
    message: '魔法视频发布成功！',
    duration: 3000,
  })

  // 重置表单
  setTimeout(() => {
    isUploaded.value = false
    uploadProgress.value = 0
    coverUrl.value = ''
    tempCoverUrl.value = ''
    videoInfo.value = {
      title: '',
      cover: '',
      type: 'original',
      tags: [],
      area: '',
      description: '',
      allowComment: true,
      allowDanmu: true,
      parts: [],
    }

    // 跳转到内容管理页面
    router.push('/front/create/content')
  }, 1000)
}

// 取消提交
const cancelSubmit = () => {
  ElMessage.info('已取消投稿')
  isUploaded.value = false
  uploadProgress.value = 0
  videoInfo.value.parts = []
}

onMounted(() => {
  console.log('上传组件加载完成')
})
</script>

<style lang="scss" scoped>
.kawaii-upload-component {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 20px;
  overflow: hidden;

  // 背景动画
  .animated-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(135deg, #fce4ec 0%, #f3e5f5 50%, #e8eaf6 100%);
    overflow: hidden;

    .floating-bubble {
      position: absolute;
      background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0) 70%
      );
      border-radius: 50%;
      opacity: 0.3;
      animation: float 15s infinite ease-in-out;

      @for $i from 1 through 15 {
        &:nth-child(#{$i}) {
          width: 20px + ($i * 3);
          height: 20px + ($i * 3);
          left: 5% + ($i * 6);
          top: 5% + ($i % 5 * 10);
          animation-delay: #{$i}s;
          animation-duration: #{10 + $i}s;
        }
      }
    }
  }

  // 上传区域样式
  .kawaii-upload-area {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 40px 20px;
    margin: 20px auto;
    width: 100%;
    max-width: 800px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 3px dashed #e3b6ec;
    transition: all 0.3s;

    &:hover {
      border-color: #ba68c8;
      background-color: rgba(255, 240, 252, 0.8);
      transform: translateY(-5px);
    }

    .upload-icon-container {
      margin-bottom: 16px;

      .upload-big-icon {
        font-size: 64px;
        display: block;
        animation: float 3s infinite ease-in-out;
      }
    }

    .upload-text {
      font-size: 18px;
      color: #9c27b0;
      margin-bottom: 24px;
      font-weight: 500;
    }

    .upload-file-btn {
      padding: 12px 36px;
      background: linear-gradient(45deg, #ff9e80, #ff80ab);
      color: white;
      border: none;
      border-radius: 30px;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 4px 8px rgba(255, 128, 171, 0.4);

      &:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(255, 128, 171, 0.6);
      }

      &.pulse-animation {
        animation: pulse 2s infinite;
      }
    }

    .upload-options {
      display: flex;
      justify-content: center;
      margin-top: 24px;

      .video-size-option,
      .video-format-option {
        position: relative;
        padding: 12px 20px;
        border-radius: 30px;
        background-color: #f3e5f5;
        color: #9c27b0;
        font-size: 14px;
        cursor: pointer;
        margin: 0 8px;
        transition: all 0.3s;

        &:hover {
          background-color: #e1bee7;
          transform: translateY(-3px);

          .option-tooltip {
            display: block;
          }
        }

        .option-tooltip {
          display: none;
          position: absolute;
          bottom: 100%;
          left: 50%;
          transform: translateX(-50%);
          width: 200px;
          background-color: white;
          border: 2px solid #e1bee7;
          border-radius: 12px;
          padding: 12px;
          margin-bottom: 12px;
          z-index: 10;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

          &::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 8px;
            border-style: solid;
            border-color: white transparent transparent transparent;
          }

          p {
            margin: 4px 0;
            font-size: 12px;
            color: #9c27b0;
          }
        }
      }
    }
  }

  // 上传内容区域
  .kawaii-upload-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
  }

  // 卡片样式
  .kawaii-card {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
  }

  // 进度条容器
  .upload-progress-container {
    .progress-header {
      text-align: center;
      margin-bottom: 20px;

      .progress-title {
        font-size: 24px;
        color: #9c27b0;
        margin: 0;
      }
    }
  }

  // 进度条样式
  .upload-progress {
    margin-bottom: 24px;

    .progress-label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      font-size: 16px;
      color: #6a1b9a;

      .progress-percent {
        font-weight: bold;
        animation: pulse 1s infinite;
      }
    }

    // 魔卡少女樱风格进度条
    .sakura-progress-container {
      position: relative;
      height: 20px;
      background-color: #f8bbd0;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 16px;
      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);

      .sakura-progress-bar {
        height: 100%;
        background: linear-gradient(to right, #ff80ab, #ff4081);
        border-radius: 10px;
        position: relative;
        transition: width 0.3s ease;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.1) 10px,
            transparent 10px,
            transparent 20px
          );
          animation: shine 2s linear infinite;
        }

        &.seal-released {
          background: linear-gradient(to right, #f48fb1, #ec407a, #e91e63);
          animation: pulse 1.5s infinite;
        }
      }

      .sakura-wand {
        position: absolute;
        top: -8px;
        width: 20px;
        height: 36px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e91e63"><path d="M12 2L9.19 8.62L2 9.24L7.45 13.97L5.82 21L12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2Z"/></svg>');
        background-repeat: no-repeat;
        background-size: contain;
        transform: translateX(-50%);
        transition: left 0.3s ease;

        &.seal-complete {
          animation: bounce 1s infinite alternate;
        }
      }
    }

    // 命运石之门世界线变动率
    .steins-gate-indicator {
      display: flex;
      justify-content: center;
      margin-top: 8px;

      .divergence-meter {
        font-family: monospace;
        color: #6a1b9a;
        font-size: 14px;
        padding: 4px 12px;
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 20px;

        .divergence-value {
          font-weight: bold;
          color: #e91e63;
          letter-spacing: 2px;
        }
      }
    }
  }

  // 进度列表
  .kawaii-progress-list {
    margin-top: 20px;

    .kawaii-part-item {
      background-color: rgba(246, 247, 248, 0.6);
      border-radius: 15px;
      padding: 15px;
      margin-bottom: 15px;
      transition: all 0.3s;
      border: 1px solid #f3e5f5;

      &:hover {
        background-color: rgba(243, 229, 245, 0.3);
        transform: translateX(5px);
      }

      .part-info {
        display: flex;
        align-items: center;

        .part-icon {
          width: 40px;
          height: 40px;
          background: linear-gradient(135deg, #ba68c8, #9c27b0);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          font-weight: bold;
          margin-right: 15px;
          font-size: 16px;
          box-shadow: 0 3px 5px rgba(156, 39, 176, 0.3);
        }

        .part-title {
          flex: 1;
          font-size: 16px;
          color: #512da8;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .part-status {
          display: flex;
          align-items: center;
          margin-right: 15px;
          font-size: 14px;
          color: #9c27b0;

          .status-icon {
            margin-right: 8px;
            animation: bounce 1s infinite alternate;
          }

          .progress-text {
            color: #9c27b0;
          }
        }

        .part-actions {
          .kawaii-action-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background-color: rgba(233, 30, 99, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
              background-color: rgba(233, 30, 99, 0.2);
              transform: scale(1.1);
            }

            .action-icon {
              font-size: 16px;
            }
          }
        }
      }
    }

    .kawaii-add-btn {
      display: inline-flex;
      align-items: center;
      background: linear-gradient(45deg, #9c27b0, #673ab7);
      color: white;
      border: none;
      border-radius: 20px;
      padding: 8px 20px;
      font-size: 15px;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 3px 8px rgba(156, 39, 176, 0.3);

      .add-icon {
        margin-right: 8px;
        font-size: 14px;
      }

      &:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 5px 15px rgba(156, 39, 176, 0.4);
      }
    }
  }

  // 表单样式
  .kawaii-form {
    .form-title {
      font-size: 22px;
      color: #9c27b0;
      margin-bottom: 24px;
      text-align: center;
      font-weight: 600;
    }

    .form-group {
      margin-bottom: 20px;

      label {
        display: block;
        margin-bottom: 8px;
        font-size: 16px;
        color: #512da8;
        font-weight: 500;

        &::before {
          content: '✨ ';
        }
      }

      input[type='text'],
      textarea,
      select {
        width: 100%;
        padding: 12px;
        border: 2px solid #e1bee7;
        border-radius: 10px;
        font-size: 15px;
        color: #512da8;
        background-color: rgba(255, 255, 255, 0.7);
        transition: all 0.3s;

        &:focus {
          outline: none;
          border-color: #9c27b0;
          background-color: white;
          box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.2);
        }

        &::placeholder {
          color: #b39ddb;
        }
      }

      textarea {
        resize: vertical;
        min-height: 100px;
      }

      select {
        appearance: none;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239c27b0"><path d="M7 10l5 5 5-5z"/></svg>');
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 20px;
        padding-right: 40px;
      }

      .cover-upload {
        .cover-preview {
          width: 100%;
          height: 200px;
          margin-bottom: 10px;
          border-radius: 10px;
          overflow: hidden;
          background-color: #f3e5f5;
          border: 2px solid #e1bee7;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .cover-placeholder {
          width: 100%;
          height: 200px;
          margin-bottom: 10px;
          border-radius: 10px;
          background-color: #f3e5f5;
          border: 2px dashed #e1bee7;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #9c27b0;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            background-color: #e1bee7;
            transform: scale(1.01);
          }
        }

        .kawaii-cover-btn {
          padding: 8px 20px;
          background: linear-gradient(45deg, #9c27b0, #673ab7);
          color: white;
          border: none;
          border-radius: 20px;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.3s;
          box-shadow: 0 3px 8px rgba(156, 39, 176, 0.3);

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(156, 39, 176, 0.4);
          }
        }
      }

      .tags-container {
        display: flex;
        flex-wrap: wrap;
        padding: 8px 12px;
        border: 2px solid #e1bee7;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.7);
        min-height: 48px;
        gap: 8px;
        align-items: center;

        .kawaii-tag {
          padding: 5px 12px;
          background: linear-gradient(45deg, #9c27b0, #673ab7);
          color: white;
          border-radius: 20px;
          font-size: 14px;
          display: flex;
          align-items: center;
          box-shadow: 0 2px 5px rgba(156, 39, 176, 0.3);
          transition: all 0.3s;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(156, 39, 176, 0.4);
          }

          .remove-tag {
            margin-left: 6px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.2s;

            &:hover {
              transform: scale(1.2);
            }
          }
        }

        .tag-input {
          border: none;
          outline: none;
          flex: 1;
          min-width: 150px;
          height: 30px;
          font-size: 14px;
          color: #512da8;
          background: transparent;

          &::placeholder {
            color: #b39ddb;
          }
        }
      }
    }

    .form-actions {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 32px;

      .kawaii-submit-btn {
        padding: 12px 36px;
        background: linear-gradient(45deg, #ff4081, #f50057);
        color: white;
        border: none;
        border-radius: 30px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);

        &:hover {
          transform: translateY(-3px) scale(1.05);
          box-shadow: 0 6px 20px rgba(233, 30, 99, 0.5);
        }
      }

      .kawaii-cancel-btn {
        padding: 12px 36px;
        background: white;
        color: #9c27b0;
        border: 2px solid #e1bee7;
        border-radius: 30px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background-color: #f3e5f5;
          transform: translateY(-3px);
        }
      }
    }
  }
}

// 封面对话框
.kawaii-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(103, 58, 183, 0.5);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;

  .kawaii-dialog {
    width: 600px;
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: dialogFadeIn 0.3s ease-out;

    .dialog-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      background: linear-gradient(45deg, #9c27b0, #673ab7);
      color: white;

      h3 {
        margin: 0;
        font-size: 18px;
      }

      .close-btn {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: white;
        transition: all 0.2s;

        &:hover {
          transform: scale(1.2);
        }
      }
    }

    .dialog-body {
      padding: 20px;

      .cover-preview-large {
        width: 100%;
        height: 240px;
        background-color: #f3e5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        border-radius: 10px;
        overflow: hidden;
        border: 2px solid #e1bee7;

        .preview-image {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
        }

        .preview-placeholder {
          color: #9c27b0;
          font-size: 16px;
        }
      }

      .cover-thumbs {
        margin: 16px 0;

        .thumb-title {
          font-size: 16px;
          color: #512da8;
          margin-bottom: 10px;
        }

        .thumb-list {
          display: flex;
          gap: 10px;

          .thumb-item {
            width: 180px;
            height: 100px;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            &:hover {
              transform: translateY(-3px);
              box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
              border-color: #9c27b0;
            }
          }
        }
      }

      .upload-options {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px 0;

        .kawaii-upload-btn {
          display: flex;
          align-items: center;
          gap: 8px;
          background: linear-gradient(45deg, #9c27b0, #673ab7);
          color: white;
          border: none;
          border-radius: 20px;
          padding: 10px 20px;
          font-size: 16px;
          cursor: pointer;
          transition: all 0.3s;
          box-shadow: 0 4px 10px rgba(156, 39, 176, 0.3);

          .upload-icon {
            font-size: 18px;
          }

          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(156, 39, 176, 0.4);
          }
        }

        .upload-hint {
          margin-top: 12px;
          font-size: 14px;
          color: #9c27b0;
        }
      }

      .dialog-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 24px;

        button {
          padding: 8px 24px;
          border-radius: 20px;
          font-size: 15px;
          cursor: pointer;
          transition: all 0.3s;
        }

        .kawaii-cancel-btn {
          background-color: white;
          border: 2px solid #e1bee7;
          color: #9c27b0;

          &:hover {
            background-color: #f3e5f5;
          }
        }

        .kawaii-confirm-btn {
          background: linear-gradient(45deg, #9c27b0, #673ab7);
          border: none;
          color: white;
          box-shadow: 0 3px 8px rgba(156, 39, 176, 0.3);

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 12px rgba(156, 39, 176, 0.4);
          }
        }
      }
    }
  }
}

// 动画关键帧
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-5px);
  }
}

@keyframes shine {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 200% 0%;
  }
}

@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 响应式布局
@media screen and (max-width: 768px) {
  .kawaii-upload-component {
    .kawaii-upload-area {
      padding: 20px 10px;
    }

    .kawaii-form {
      .form-group {
        .cover-upload {
          .cover-preview,
          .cover-placeholder {
            height: 150px;
          }
        }
      }
    }
  }

  .kawaii-dialog-overlay {
    .kawaii-dialog {
      width: 90%;
      max-width: 500px;

      .dialog-body {
        .cover-thumbs {
          .thumb-list {
            flex-direction: column;
            align-items: center;

            .thumb-item {
              width: 100%;
              max-width: 300px;
            }
          }
        }
      }
    }
  }
}
</style>
